import { useRequest } from "@/.umi/plugin-request";
import { login, register } from "@/services/user/user";
import { Button, Form, Input, message } from "antd";
import styles from "./index.less";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { useState } from "react";
import { history } from "@umijs/max";
import { setToken, setUerInfo } from "@/utils/info";
import { objToArr } from "@/utils";
import { RoleTypeEnum } from "@/constants/enum";
import { IDCardReg, PhoneReg } from "@/constants/reg";


export default () => {
  const [form] = Form.useForm();
  const [isLogin,setIsLogin] = useState(true);
  const [type, setType] = useState(1);
  const { run: loginFun,loading:loginLoading } = useRequest(login, {
    manual: true, // 手动触发
    onSuccess: (res) => {
      if (res instanceof Error) return;
      setToken(res?.authorization);
      setUerInfo({
        userName: res?.userName,
        account: res?.account,
        role: res?.role,
      });
      message.success("登录成功");
      if(res?.role===3){
        history.push('/roomUser')
      }else {
        history.push("/");
      }
    },
  });
  const {run: registerFun,loading:registerLoading } = useRequest(register,{
    manual:true,
    onSuccess:(res)=>{
      if (res instanceof Error) return;
      message.success("注册成功");
      setIsLogin(true)
    }
  })
  const onFinish = async (values: any) => {
    await form.validateFields();
    if(isLogin){
      loginFun({
        ...values,
        role: type,
      })
    }else{
      registerFun(values);
    }
  };

  return (
    <div className={styles.container}>
      <div className={styles.loginForm}>
        <div className={styles.title}>住宿管理系统</div>
        <div className={styles.loginContent}>
          <Form form={form} onFinish={onFinish} style={{width:'264px'}} layout="vertical">
            {
              isLogin ? <><div className={styles.type}>
              {objToArr(RoleTypeEnum).filter(i=>i.key!==4).map((item, index) => (
                <>
                  {index !== 0 && <span className={styles.middleText}>|</span>}
                  <span
                    key={index}
                    className={`${type === item.key && styles.active}`}
                    onClick={() => setType(item.key as number)}
                  >
                    {item.value}
                  </span>
                </>
              ))}
            </div>
            <Form.Item
              name="account"
              rules={[{ required: true, message: type===3?"请输入":"请输入" }]}
            >
              <Input prefix={<UserOutlined />} placeholder={type===3?'手机号':'账号'} />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[{ required: true, message: "请输入" }]}
            >
              <Input.Password prefix={<LockOutlined />} placeholder={type===3?"密码默认为身份证后6位":"密码"} />
            </Form.Item></> :<>
            <div className={styles.type}>
              注册账号
            </div>
            <Form.Item
            label="姓名"
              name="realName"
              rules={[{ required: true, message: "请输入姓名" }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              name="identifyNum"
              label="身份证号码"
              rules={[
                {
                  required: true,
                },
                {
                  pattern: IDCardReg,
                  message: "请输入正确的身份证号码",
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
            name="tel"
            label="手机号码"
            rules={[
              {
                required: true,
              },
              {
                pattern: PhoneReg,
                message: "请输入正确的手机号码",
              },
            ]}
          >
            <Input />
          </Form.Item>
            </>
            }
            
            <Form.Item>
              <Button
              loading={isLogin ? loginLoading : registerLoading}
                type="primary"
                htmlType="submit"
                style={{ width: "100%" }}
              >
                {isLogin ? '登录':'注册'}
              </Button>
            </Form.Item>
          </Form>
          <div className={styles.bottomOp}>
            <span className={styles.opItem} onClick={()=>{setIsLogin(!isLogin)}}>{isLogin ? '去注册':'去登录'}</span>
          </div>
        </div>
      </div>
    </div>
  );
};
